import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET = 100;

class HomePage extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<HomePage> {
  final PageController _container = PageController(
    // 初始为0
    initialPage: 0,
  );
  List _imgUrls = [
    'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1673279.jpg?max_age=2592000',
    'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1666966.jpg?max_age=2592000',
    'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1671886.jpg?max_age=2592000',
    'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1672814.jpg?max_age=2592000'
  ];
  double appBarAlpha = 0;
  _onScroll(offset) {
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    // 设置appBarAlpha
    setState(() {
      appBarAlpha = alpha;
    });
    print(alpha);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // body center居中  这个MediaQuery.removePadding就是表示去掉手机默认的padding,removeTop,left,right,bottom
      // Stack表示可以叠加 后面的dom可以叠加到前面的dom
      body: Stack(
        children: <Widget>[
          MediaQuery.removePadding(
            // 去掉top的padding 安卓去掉状态栏
            removeTop: true,
            context: context,
            // NotificationListener监听列表滚动
            child: NotificationListener(
              onNotification: (scrollNotification) {
                // scrollNotification.depth == 0 深度为0时，也就是第一个listView滑动时才触发_onScroll
                if (scrollNotification is ScrollUpdateNotification &&
                    scrollNotification.depth == 0) {
                  // 滚动且是列表滚动的时候
                  _onScroll(scrollNotification.metrics.pixels);
                }
              },
              child: ListView(
                // children表示首页的全部内容，表示为数组[<Widget>]
                children: <Widget>[
                  // Container内容
                  Container(
                    height: 160,
                    // child为swiper的组件
                    child: Swiper(
                      // itemCount是长度
                      itemCount: _imgUrls.length,
                      autoplay: true,
                      // itemBuilder 表示swiper的封装 Function
                      itemBuilder: (BuildContext context, int index) {
                        // network加载网络图片
                        return Image.network(
                            // 第一个是默认的url
                            _imgUrls[index],
                            // 图片填充
                            fit: BoxFit.fill);
                      },
                      pagination: new SwiperPagination(),
                    ),
                  ),
                  Container(
                    height: 800,
                    child: ListTile(
                      title: Text('文本'),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Opacity(
            opacity: appBarAlpha,
            child: Container(
              height: 60,
              decoration: BoxDecoration(color: Colors.white),
              child: Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text('首页'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
